<template>
	<view style="background: rgb(245, 245, 245);padding-top: 15rpx;">
		<view class="container">
			<view class="top-card">
				<view class="top-left">
					<view class="top-tips">寄</view>
					<view class="cell"></view>
					<view class="bottom-tips">收</view>
				</view>
				<view class="top-right">
					<view v-if="name && phone && address" @tap="goaddexpressinfo">
						<view class="right-name">{{name}} {{phone}}</view>
						<view class="right-adress">{{address}}</view>
					</view>
					<input type="text" disabled="true" @tap="goaddexpressinfo" v-if="!name && !phone && !address" class="ipt-box" value="" placeholder-style="font-size: 28rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #c3c3c3;" placeholder="请输入寄件人信息"/>
					<view v-if="receivename && receivephone && receiveaddress" @tap="goaddexpressinfos">
						<view class="right-name1">{{receivename}} {{receivephone}}</view>
						<view class="right-adress1">{{receiveaddress}}</view>
					</view>
					<input type="text" disabled="true" @tap="goaddexpressinfos" v-if="!receivename && !receivephone && !receiveaddress" class="ipt-box1" value="" placeholder-style="font-size: 28rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #c3c3c3;" placeholder="请输入收件人信息"/>
				</view>
			</view>
			<view class="center-card">
				<view class="card-list">
					<view class="card-name">物件重量（kg）</view>
					<view class="card-text">
						<uni-number-box :min="1" :value="changevalue" @change="change"></uni-number-box>
					</view>
				</view>
				<view class="card-list" @tap="chosetype">
					<view class="card-name">物件类型</view>
					<view class="card-right">
						<view class="card-text">{{goodstype}}</view>
						<view class="right-icon">
							<image src="../../../static/images/right.png" class="right-img"></image>
						</view>
					</view>
				</view>
				<view class="card-list" @tap="choseexpress">
					<view class="card-name">快递公司</view>
					<view class="card-right">
						<view class="card-text">{{expresstype}}</view>
						<view class="right-icon">
							<image src="../../../static/images/right.png" class="right-img"></image>
						</view>
					</view>
				</view>
				<view class="card-list">
					<view class="card-name">备注</view>
					<view class="card-text" style="width: 100%;">
						<input type="text" v-model="remarks" maxlength="20" style="padding-right: 20rpx;width: 100%;text-align: right;" value="" placeholder-style="font-size: 24rpx;font-weight: normal;font-stretch: normal;line-height: 60rpx;letter-spacing: 0rpx;color: #c3c3c3;" placeholder="填写备注，20字以内"/>
					</view>
				</view>
				<view class="card-list" style="border-bottom: 0;">
					<view class="card-name">代发费用</view>
					<view class="card-text" style="padding-right: 20rpx;"><text style="color: #fa0101;">{{send_price}}</text>元</view>
				</view>
			</view>
			<view class="bottom-text">提交信息后，社区将及时通知相关快递公司上门取件收发快递。</view>
			<button type="primary" :style="btn_style" class="btn" @click="btnpay">提交（￥{{send_price}}）</button>
			<!-- 选择快递，物品类型弹层 -->
			<view>
				<uni-popups ref="popup" type="bottom" style="width: 100%;">
					<view class="active-box">
						<view class="active-title">物件类型</view>
						<view class="detail-icon" @tap="closePopup">
							<image src="../../../static/images/guanbi.png" class="detail-img"></image>
						</view>
					</view>
					<view class="popups-box">
						<view class="chose-btn" @tap="selecttype(index,item)" v-for="(item,index) in express.goods_type" :class="num === index?'active':''" :key="index">{{item}}</view>
					</view>
				</uni-popups>
			</view>
			<view>
				<uni-popups ref="popups" type="bottom" style="width: 100%;">
					<view class="active-box expressCompanyTitle">
						<view class="active-title">快递公司选择</view>
						<view class="detail-icon" @tap="closePopup">
							<image src="../../../static/images/guanbi.png" class="detail-img"></image>
						</view>
					</view>
					<view class="popups-list expressCompanyList">
						<view class="text" @tap="selectexpress(items.value,items.name)" v-for="(items,indexs) in express.express_list" :key="indexs">{{items.value}}</view>
					</view>
				</uni-popups>
			</view>
		</view>
	</view>
	
</template>

<script>
	import uniPopups from "../../../appComponent/uni/uni-popups/uni-popups.vue"
	import uniNumberBox from "../component/uni-number-box/uni-number-box.vue"
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	// 获取快递,物品类型
	const getexpressType = () => {
		common.post('HouseApi&a=express_list', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
		}, 
		data => {
			console.log('++++', data)
			_this.send_price = data.express_send_price;
			_this.express = data;
			
		});
	};
	//提交
	const getaddExpress = () => {
		common.post('HouseApi&a=express_send_add', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			send_price: _this.send_price,
			send_uname: _this.name,
			send_phone: _this.phone,
			send_city: _this.address,
			send_adress: _this.text,
			collect_uname: _this.receivename,
			collect_phone: _this.receivephone,
			collect_city: _this.receiveaddress,
			collect_adress: _this.receivetext,
			weight: _this.changevalue,
			goods_type: _this.goodstype,
			express: _this.expressname,
			remarks: _this.remarks,
		},data => {
			console.log('++++', data)
			uni.navigateTo({
				url:'/pages/village/my/expressManagement?current=1'
			})
		});
	};

	export default {
		data() {
			return {
				listdata: {},
				express:{},
				village_id: 0,
				pigcms_id: 0,
				actcolor: '',
				btn_style: '',
				changevalue:1,
				num: 0,
				goodstype:'', //物品类型
				expresstype:'',//快递类型
				send_price: 0,
				remarks:'',
				expressname: '',//快递类型
				// 寄信息
				name: '',
				phone: '',
				address: '',
				text: '',
				// 收信息
				receivename: '',
				receivephone: '',
				receiveaddress: '',
				receivetext: '',
			}
		},
		onShow() {
			// #ifdef H5
			common.hideWxShare()
			// #endif
			
			// 寄
			const resnum = uni.getStorageSync('send_key');
			if (resnum) {
				_this.name = resnum.name;
				_this.phone = resnum.phone;
				_this.text = resnum.text;
				_this.address = resnum.address + resnum.text;
			}
			// 收
			const resdata = uni.getStorageSync('receive_key');
			if (resdata) {
				_this.receivename = resdata.receivename;
				_this.receivephone = resdata.receivephone;
				_this.receivetext = resdata.receivetext;
				_this.receiveaddress = resdata.receiveaddress + resdata.receivetext;
			}
		},
		onLoad(options) {
			_this = this;
			
			// #ifdef H5
			console.log('准备跳小程序页', _this);
			common.webToMiniapp(_this.route, options, 'redirect')
			// #endif

			common.setMainColor(_this, function(config) {
				_this.actcolor = config.config.mobile_head_color
				_this.btn_style = 'background-color: ' + _this.actcolor + ';box-shadow:0px 30rpx 30rpx -30rpx ' + _this.actcolor +
					';';

				const res = uni.getStorageSync('village_key');
				if (res) {
					_this.village_id = res.village_id;
					_this.pigcms_id = res.pigcms_id;
					_this.village_name = res.village_name;
				};
				getexpressType()
			});
		},
		methods: {
			goaddexpressinfo(){
				uni.navigateTo({
					url:'/pages/village/my/addexpressInfo?type=0'
				})
			},
			goaddexpressinfos(){
				uni.navigateTo({
					url:'/pages/village/my/addexpressInfo?type=1'
				})
			},
			change(value){
				console.log(value)
				_this.changevalue = value
			},
			//提交
			btnpay(){
				uni.removeStorageSync('send_key');
				uni.removeStorageSync('receive_key');
				uni.showModal({
					title: common.changeTxt('提示'),
					content: common.changeTxt('您确定要支付' + _this.send_price +'，并发布需求吗？' ),
					showCancel: true,
					confirmText: common.changeTxt('确定'),
					success: function(res) {
						if (res.confirm) {
							getaddExpress();
						}
					}
				});
				
			},
			// 弹层选择物品类型
			selecttype(index,item) {
				_this.num = index;
				_this.goodstype = item;
				this.$refs.popup.close();
				return false;
			},
			// 弹层选择快递公司
			selectexpress(express,name){
				_this.expresstype = express;
				_this.expressname = name;
				this.$refs.popups.close();
				return false;
			},
			// 选择物品类型
			chosetype(){
				_this.openPopup()
				getexpressType()
			},
			// 选择快递公司
			choseexpress(){
				this.$refs.popups.open()
				getexpressType()
			},
			openPopup() {
				this.$refs.popup.open()
			
			},
			closePopup() {
				this.$refs.popup.close();
				this.$refs.popups.close();
			},
		},
		components: {
			uniNumberBox,
			uniPopups
		}
	}
</script>

<style>
	page {
		background: rgb(245, 245, 245);
		background: #FFFFFF;
	}

	.container {
		margin: 0;
		padding: 0;
		background: #FFFFFF;
		overflow: hidden;
	}
	.top-card {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 30rpx 0rpx 60rpx 0rpx;
	}
	.top-tips {
		width: 46rpx;
		height: 46rpx;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 46rpx;
		text-align: center;
		background: rgb(38, 129, 243);
		border-radius: 46rpx;
		letter-spacing: 0rpx;
		color: #f5f5f5;
	}
	.ipt-box {
		margin-top: 20rpx;
		border-bottom: 2rpx solid #e5e5e5;
		padding-bottom: 65rpx;
	}
	.ipt-box1 {
		margin-top: 48rpx;
	}
	.bottom-tips {
		width: 46rpx;
		height: 46rpx;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 46rpx;
		text-align: center;
		background-color: #01cdcd;
		border-radius: 46rpx;
		letter-spacing: 0rpx;
		color: #f5f5f5;
	}
	.top-left {
		display: flex;
		flex-direction: column;
		align-content: center;
		padding-left: 50rpx;
		padding-top: 25rpx;
	}
	.cell {
		width: 2rpx;
		height: 90rpx;
		background: #e5e5e5;
		margin: 10rpx auto;
	}
	.top-right {
		width: 100%;
		margin: 0 30rpx;
	}
	.right-name {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #333333;
	}
	.right-adress {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #c3c3c3;
		border-bottom: 2rpx solid #e5e5e5;
		padding-bottom: 30rpx;
	}
	.right-name1 {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #333333;
		padding-top: 30rpx;
	}
	.right-adress1 {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0rpx;
		color: #c3c3c3;
	}
	.center-card {
		display: flex;
		flex-direction: column;
		box-shadow: 0px 2rpx 11rpx 4rpx rgba(213, 213, 213, 0.33);
		margin: 0rpx 30rpx 30rpx 30rpx;
		border-radius: 10rpx;
		padding:0rpx 20rpx;
	}
	.card-list {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 0;
		border-bottom: 2rpx solid #F1F1F1;
	}
	.card-name {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 100rpx;
		letter-spacing: 0rpx;
		color: #858484;
		flex-shrink: 0;
	}
	.card-right {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.right-icon {
		width: 30rpx;
		height: 30rpx;
		margin: 0rpx 15rpx;
	}
	
	.right-img {
		display: block;
		width: 100%;
		height: 100%;
	}
	.bottom-text {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 36rpx;
		letter-spacing: 0rpx;
		color: #858484;
		margin: 0 30rpx;
		text-align: center;
	}
	.btn {
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 90rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
		border-radius: 44rpx;
		margin: 0rpx 100rpx;
		margin-top: 50rpx;
		border: 0rpx;
	}
	.active-box {
		display: fixed;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		border-bottom: 2rpx solid #e5e5e5;
	}
	.expressCompanyTitle{
		position:fixed;
		top:0;
		left:0;
		width:100%;
	}
	.expressCompanyTitle{
		position:fixed;
		top:0;
		left:0;
		width:100%;
		background-color: white;
	}
	.expressCompanyList{
		padding-top:100rpx;
	}
	/deep/.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		border-radius: 20rpx 20rpx 0rpx 0rpx;
	}
	.active-title {
		font-size: 34rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 100rpx;
		letter-spacing: 0px;
		text-align: center;
		color: #000000;
		width: 100%;
		transform: translateX(40rpx);
	}
	
	.detail-icon {
		width: 100rpx;
		height: 100rpx;
		position:fixed;
		right:0;
		top:0;
	}
	
	.detail-img {
		width: 40rpx;
		height: 40rpx;
		margin-top:30rpx;
		margin-left:30rpx;
		display: block;
	}
	.popups-box {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	.chose-btn{
		font-size: 26rpx;
		width: 150rpx;
		text-align: center;
		border-radius: 30rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 65rpx;
		letter-spacing: 0rpx;
		color: #858484;
		padding: 0 20rpx;
		margin: 30rpx;
		background: rgb(242, 243, 244);
	}
	.active {
		background: rgb(38, 129, 243);
		color: #FFFFFF;
	}
	.text {
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 100rpx;
		letter-spacing: 0rpx;
		color: #858484;
		padding-left: 30rpx;
		border-bottom: 2rpx solid #e5e5e5;
	}
</style>
